<template>
  <div class="container">
    <!-- 顶部提示 -->
    <div class="topTip" v-if="isShowProRisk">
      <div class="dangerBox">
        <div class="leftBox">项目风险</div>
        <div class="rightBox">
          <el-carousel
            height="32px"
            indicator-position="none"
            direction="vertical"
            v-if="dangerousDataTotal > 0"
          >
            <el-carousel-item
              v-for="(item, index) in dangerousProjects"
              :key="index"
            >
              <el-row :gutter="24">
                <el-col :span="12" class="cursor ellipsis">
                  <span
                    @click="
                      skipProjectDanger(
                        item.projectId,
                        '/home/enterpriseScore/projectScoreList',
                        item.projectScoreId
                      )
                    "
                    >{{ item.projectName }}</span
                  >
                  <span
                    @click="
                      skipProjectDanger(
                        item.projectId,
                        '/home/enterpriseScore/projectScoreList',
                        item.projectScoreId
                      )
                    "
                    class="redColor"
                    >{{ item.reason }}</span
                  >
                </el-col>
                <el-col
                  :span="12"
                  class="cursor ellipsis"
                  v-if="item.projectNameRight"
                >
                  <span
                    @click="
                      skipProjectDanger(
                        item.projectIdRight,
                        '/home/enterpriseScore/projectScoreList',
                        item.projectScoreIdRight
                      )
                    "
                    >{{ item.projectNameRight }}</span
                  >
                  <span
                    @click="
                      skipProjectDanger(
                        item.projectIdRight,
                        '/home/enterpriseScore/projectScoreList',
                        item.projectScoreIdRight
                      )
                    "
                    class="redColor"
                    >{{ item.reasonRight }}</span
                  >
                </el-col>
              </el-row>
            </el-carousel-item>
          </el-carousel>
          <div v-else>暂无风险项目</div>
        </div>
      </div>
    </div>
    <!-- <el-row class="backPay" v-if="backPayList&&backPayList.length>0&&isCzUser()">
      <div class="infoBox">
        <div class="subBox" ref="subBox">
          <div class="info" v-for="v in backPayList" :key="v.id">
            <i class="icon iconfont iconjingshi warn"></i>
            <span class="desc">拖欠劳动报酬项目：</span>
            <span>{{v.projectName+"（责任主体："+v.companyName+"，涉及金额："}}</span>
            <span class="warn">{{v.balance|splitNumber}}元</span>）
          </div>
        </div>
      </div>
      <el-button class="commonBut saveBtn funComBut lookMore" style="margin-right:10px" @click="jumpIllegalRecord">
          <span class="opetareText">查看更多</span>
      </el-button>
    </el-row> -->
    <!-- 待办事项和政策要点 -->
    <div class="secondLineBox">
      <el-row class="boxInner" :gutter="10">
        <!-- 待办事项 -->
        <el-col :span="15" v-if="isShowRating">
          <div class="secondLeftBox">
            <!-- 待办事项 -->
            <div class="waitTodo" v-if="hide">
              <div class="titleWord">待办事项</div>
              <el-tabs v-model="activeName">
                <el-tab-pane name="first">
                  <span slot="label">
                    待处理预警
                    <!-- <div class="numIcon">{{ allAlertTotal }}</div> -->
                    <div class="numIcon" v-if="allAlertTotal < 100">
                      {{ allAlertTotal }}
                    </div>
                    <div class="numIcon" v-else>99+</div>
                  </span>
                  <el-row :gutter="14">
                    <el-col
                      class="alertItemBox"
                      :span="6"
                      v-for="(item, index) of alertData"
                      :key="index"
                    >
                      <div
                        class="alertItemInner"
                        @click="
                          skipAlert(
                            item.num,
                            item.code,
                            '/home/project/constructAlertProjectList'
                          )
                        "
                      >
                        <div class="alertNum">{{ item.num }}</div>
                        <div class="alertName">{{ item.name }}(个)</div>
                      </div>
                    </el-col>
                  </el-row>
                </el-tab-pane>
                <!-- 施工方显示，建设方不显示 -->
                <el-tab-pane name="second" v-if="!isJS">
                  <span slot="label">
                    申报中项目
                    <!-- <div class="numIcon">{{ projectApplyTotal }}</div> -->
                    <div class="numIcon" v-if="projectApplyTotal < 100">
                      {{ projectApplyTotal }}
                    </div>
                    <div class="numIcon" v-else>99+</div>
                  </span>
                  <div class="tabContent">
                    <div v-if="projectApplyTotal > 0">
                      <el-row
                        :gutter="10"
                        v-for="(item, index) of projectApplyData"
                        :key="index"
                      >
                        <el-col :span="15" class="ellipsis">{{
                          item.projectName
                        }}</el-col>
                        <el-col :span="6" class="alignCenter"
                          >未通过申报</el-col
                        >
                        <el-col :span="3">
                          <el-link
                            type="primary"
                            class="fr"
                            @click="
                              projectApply(
                                item.id,
                                '/home/project/projectDeclareList'
                              )
                            "
                            >去查看</el-link
                          >
                        </el-col>
                      </el-row>
                      <el-row class="alignCenter" v-if="projectApplyTotal > 4">
                        <el-link
                          type="primary"
                          @click="
                            projectApply(
                              null,
                              '/home/project/projectDeclareList'
                            )
                          "
                          >查看更多>></el-link
                        >
                      </el-row>
                    </div>
                    <div v-else class="noData" style="margin-top: 60px">
                      暂无申报中项目
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <!-- 项目评级 -->
            <!-- 暂时隐藏，请勿删掉代码 -->
            <!-- <div style="margin-top: 10px;height: 318px;" v-if="isShowRating"> -->
            <div style="height: 318px" v-if="isShowRating">
              <div class="creditBox">
                <el-row>
                  <span class="title">项目评级</span>
                  <!-- <span class="smallCreditBox greenBjColor"></span>
                  <span>A级项目</span>
                  <span class="smallCreditBox blueBjColor"></span>
                  <span>B级项目</span>
                  <span class="smallCreditBox yellowBjColor"></span>
                  <span>C级项目</span>
                  <span class="smallCreditBox redBjColor"></span>
                  <span>D级项目</span> -->
                </el-row>
                <el-row style="margin-top: 10px">
                  <el-col :span="8">
                    <div id="projectCreditStatic" class="statistic"></div>
                  </el-col>
                  <el-col :span="16" class="keyContainer">
                    <div class="noData" v-if="creditData.length === 0">
                      <p>您当前没有参评的项目</p>
                    </div>
                    <div
                      class="listBox"
                      id="listBox"
                      v-else-if="creditData.length > 0"
                    >
                      <ul>
                        <li v-for="(item, index) of creditData" :key="index">
                          <span
                            class="projectName ellipsis"
                            :title="item.projectName"
                            >{{ item.projectName }}</span
                          >
                          <span class="gradeLevel ellipsis">
                            <span
                              class="icon iconfont iconpingfendengji tag"
                            ></span>
                            <!-- <span v-if="item.gradeLevel == 'A'" class="smallCreditBox greenBjColor"></span>
                            <span v-if="item.gradeLevel == 'B'" class="smallCreditBox blueBjColor"></span>
                            <span
                              v-if="item.gradeLevel == 'C'"
                              class="smallCreditBox yellowBjColor"
                            ></span>
                            <span v-if="item.gradeLevel == 'D'" class="smallCreditBox redBjColor"></span> -->
                            {{ item.gradeLevel }}
                          </span>
                        </li>
                      </ul>
                    </div>
                    <div
                      style="text-align: center; margin-top: 16px"
                      v-if="creditTotal > 3"
                    >
                      <el-link
                        type="primary"
                        @click="
                          creditSeeMore(
                            '/home/enterpriseScore/projectScoreList'
                          )
                        "
                        >查看更多>></el-link
                      >
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 政策要点 -->
        <el-col :span="isShowRating ? 9 : 24" class="leftBox">
          <div
            :class="isShowRating == true ? 'leftBoxInnerTwo' : 'leftBoxInner'"
            id="niceScroll"
          >
            <div class="titleWord">政策要点</div>
            <ul class="contentBox" v-if="policyTotal > 0">
              <li
                style="width: 100%; height: 70px"
                v-for="(item, index) of policyData"
                :key="index"
                class="fl"
              >
                <span>【{{ item.infoTypeDesc }}】</span>
                <span class="noticeTitle" :title="item.title"
                  >{{ item.title }} {{ func('noticeTitle', clientWidth) }}</span
                >
                <!-- <span class="noticeTitle" :title="item.title">{{ item.title }}</span> -->
                <!-- <span class="ellipsisTwo" :title="item.title">【{{item.infoTypeDesc}}】{{ item.title }}</span> -->
                <el-link
                  type="primary"
                  class="fr seeContent"
                  @click="
                    skipPolicy(
                      item.id,
                      item.title,
                      item.type,
                      item.range,
                      '/home/notice/inforList'
                    )
                  "
                  >查看全文>></el-link
                >
              </li>
            </ul>
            <!-- <div v-else class="noData">暂无政策要点数据</div> -->
            <div
              v-else
              :class="isShowRating == true ? 'noData' : 'noDataOther'"
            >
              暂无政策要点数据
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 分账户和实名制 -->
    <div class="ThirdLineBox">
      <el-row :gutter="10">
        <el-col :span="12">
          <div class="grid-content bg-purple leftBoxHalf">
            <el-row>
              <div class="title">分账管理制度落实情况</div>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="titleSmall">专户开设</div>
                <div id="accountProjectStatic" class="statistic"></div>
                <div style="text-align: center; margin-top: 50px">
                  <span class="smallaccountBox skyBlueBjColor"></span>
                  <span>专户开设项目数</span>&nbsp;
                  <span class="redColor">{{ accounProjectNum || '0' }}个</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="titleSmall">专户余额</div>
                <div id="accountMoneyStatic" class="statistic"></div>
                <div style="text-align: center; margin-top: 50px">
                  <span class="smallaccountBox skyRedBjColor"></span>
                  <span>专户总余额</span>&nbsp;
                  <span class="redColor"
                    >{{ accounBanlanceNum || '0' }}万元</span
                  >
                </div>
              </el-col>
            </el-row>
            <div class="keyWrapper" style="height: 92px; margin-top: 60px">
              <ul>
                <li class="keyBox">
                  <p class="keyName">专户缴存总额</p>
                  <p>
                    <span class="quantity">{{
                      accountInfo.inTotal || '0'
                    }}</span>
                    <span class="keyName">万元</span>
                  </p>
                </li>
                <li class="keyBox">
                  <p class="keyName">专户缴存余额</p>
                  <p>
                    <span class="quantity">{{
                      accountInfo.banTotal || '0'
                    }}</span>
                    <span class="keyName">万元</span>
                  </p>
                </li>
                <li class="keyBox">
                  <p class="keyName">专户足额缴存比例</p>
                  <p class="quantity">{{ accountInfo.scale || '0' }}%</p>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="rightBoxHalf">
            <div class="title">实名制管理制度落实情况</div>
            <div id="employStatic" class="statistic"></div>
            <div class="keyWrapper" style="height: 200px">
              <ul>
                <li class="keyBox">
                  <p class="keyName">实名制总人数</p>
                  <p>
                    <span class="quantity">{{
                      employeeInfo.empTotal || '0'
                    }}</span>
                    <span class="keyName">人</span>
                  </p>
                </li>
                <li class="keyBox">
                  <p class="keyName">本月新增人数</p>
                  <p>
                    <span class="quantity">{{
                      employeeInfo.empMonthTotal || '0'
                    }}</span>
                    <span class="keyName">人</span>
                  </p>
                </li>
                <li class="keyBox">
                  <p class="keyName">总考勤数</p>
                  <p>
                    <span class="quantity">{{
                      employeeInfo.attTotal || '0'
                    }}</span>
                    <span class="keyName">次</span>
                  </p>
                </li>
                <li class="keyBox">
                  <p class="keyName">本月考勤数</p>
                  <p>
                    <span class="quantity">{{
                      employeeInfo.attMonthTotal || '0'
                    }}</span>
                    <span class="keyName">次</span>
                  </p>
                </li>
                <li class="keyBox">
                  <p class="keyName">实名制合同签订比例</p>
                  <p class="quantity">
                    {{ employeeInfo.contractScale || '0' }}%
                  </p>
                </li>
                <li class="keyBox">
                  <p class="keyName">实名制考勤比例</p>
                  <p class="quantity">{{ employeeInfo.attScale || '0' }}%</p>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 工资代发和保证金 -->
    <div class="forthLineBox">
      <el-row :gutter="10">
        <el-col :span="12">
          <div class="rightBoxHalf">
            <div class="title">工资代发制度落实情况</div>
            <div id="salaryStatic" class="statistic"></div>
            <div class="keyWrapper" style="height: 200px">
              <ul>
                <li class="keyBox">
                  <p class="keyName">代发总金额</p>
                  <p>
                    <span class="quantity">{{
                      salaryInfo.bankPayTotal || '0'
                    }}</span>
                    <span class="keyName">万元</span>
                  </p>
                </li>
                <li class="keyBox">
                  <p class="keyName">代发总人次</p>
                  <p>
                    <span class="quantity">{{
                      salaryInfo.bankPayCount || '0'
                    }}</span>
                    <span class="keyName">人</span>
                  </p>
                </li>
                <li class="keyBox">
                  <p class="keyName">工资代发比例</p>
                  <p class="quantity">{{ salaryInfo.bankPayScale || '0' }}%</p>
                </li>
                <li class="keyBox">
                  <p class="keyName">本月实发金额</p>
                  <p>
                    <span class="quantity">{{
                      salaryInfo.bankPayTotalOfMonth || '0'
                    }}</span>
                    <span class="keyName">万元</span>
                  </p>
                </li>
                <li class="keyBox">
                  <p class="keyName">本月实发人次</p>
                  <p>
                    <span class="quantity">{{
                      salaryInfo.bankPayCountOfMonth || '0'
                    }}</span>
                    <span class="keyName">人次</span>
                  </p>
                </li>
                <li class="keyBox">
                  <p class="keyName">工资确认比例</p>
                  <p class="quantity">{{ salaryInfo.confirmScale || '0' }}%</p>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple leftBoxHalf">
            <div class="title">保证金制度落实情况</div>
            <el-row class="bzjBox">
              <el-col :span="10">
                <ul>
                  <li v-for="(item, i) in statusDetail" :key="i">
                    <span
                      class="styBox"
                      :style="{ background: item.colorStyle }"
                    ></span>
                    <span>{{ item.name }}</span>
                    <span style="color: #ff5a24">{{ item.value }}个</span>
                    <span>{{ item.percent }}</span>
                  </li>
                </ul>
              </el-col>
              <el-col :span="14" class="bzjR">
                <div ref="ProDisData" class="ProDisData"></div>
              </el-col>
            </el-row>
            <div class="keyWrapper" style="height: 200px">
              <ul>
                <li class="keyBox">
                  <p class="keyName">缴纳总金额</p>
                  <p>
                    <span class="quantity">{{
                      bzjInfo.transferInTotal || '0'
                    }}</span>
                    <span class="keyName">万元</span>
                  </p>
                </li>
                <li class="keyBox">
                  <p class="keyName">动用总金额</p>
                  <p>
                    <span class="quantity">{{
                      bzjInfo.transferOutTotal || '0'
                    }}</span>
                    <span class="keyName">万元</span>
                  </p>
                </li>
                <li class="keyBox">
                  <p class="keyName">退还总金额</p>
                  <p>
                    <span class="quantity">{{
                      bzjInfo.returnTotal || '0'
                    }}</span>
                    <span class="keyName">万元</span>
                  </p>
                </li>
                <li class="keyBox">
                  <p class="keyName">保证金余额</p>
                  <p>
                    <span class="quantity">{{ bzjInfo.balance || '0' }}</span>
                    <span class="keyName">万元</span>
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'constructCompanyHome',
  data() {
    return {
      isShowRating: true, //控制项目评级是否展示
      dangerousProjects: [], //风险项目数据
      dangerousDataTotal: 0,
      policyData: [], //政策要点数据
      policyTotal: 0,
      activeName: 'first',
      alertData: [
        { name: '专户未开设预警', num: 0, code: '01' },
        { name: '工资拖欠预警', num: 0, code: '04' },
        { name: '考勤异常预警', num: 0, code: '03' },
        { name: '童工预警', num: 0, code: '02' },
      ],
      allAlertTotal: 0, //预警总数
      projectApplyData: [], //项目申报数据
      projectApplyTotal: 0,
      creditTotal: 0,
      creditData: [], //评级列表
      accountInfo: '', //专户分拨账户
      accounProjectNum: '', //专户项目数
      accounBanlanceNum: '', //专户总余额
      employeeInfo: '', //实名制信息
      salaryInfo: '', //工资代发信息
      statusDetail: [], //保证金
      bzjInfo: '',
      clientWidth: document.body.clientWidth,
      isShowProRisk: false,
      creditChart: '', //项目评级图表
      accountChartL: '', //专户图表左
      accountChartR: '', //专户图表右
      employeeChart: '', //实名制图表
      salaryChart: '', //工资代发图表
      bzjChart: '', //保证金图表
      isJS: false,
      hide: false, //代办事项，临时使用
      backPayList: [], //拖欠劳动报酬轮播列表
      projectId: '',
    }
  },
  async created() {
    await this.getBackPayList()
    this.beginRotation()
    //获取风险项目数据
    this.getDangerData()
    //获取政策要点数据
    this.getPlicyData()
    //获取代办事项总数
    this.getTodoTotal()
    //获取预警数据
    this.getAlertData()
    //获取申报中项目数据
    this.getProjectApply()
    // 恩施不显示项目风险
    //恩施不显示项目评级
    if (this.isEsUser()) {
      this.isShowProRisk = false
      this.isShowRating = false
    } else {
      this.isShowProRisk = false
    }
    if (localStorage.getItem('judgeRoleCode') == 'owner') {
      this.isJS = true
    }
  },
  activated() {
    // 解决其他页面浏览器放大缩小，切换到本页面echarts不显示的问题
    if (
      this.creditChart ||
      this.accountChartL ||
      this.accountChartR ||
      this.employeeChart ||
      this.salaryChart ||
      this.bzjChart
    ) {
      setTimeout(() => {
        this.creditChart.resize()
        this.accountChartL.resize()
        this.accountChartR.resize()
        this.employeeChart.resize()
        this.salaryChart.resize()
        this.bzjChart.resize()
      }, 100)
    }
  },
  mounted() {
    window.onresize = () => {
      this.clientWidth = document.body.clientWidth
      this.$nextTick(() => {
        this.func('noticeTitle', this.clientWidth)
      })
    }
    //政策要点滚动显示
    $('#niceScroll').niceScroll({
      cursorwidth: '10px',
      cursoropacitymax: 0.5,
    })
    //项目评级
    this.getCreditL()
    this.getCreditR()
    //分账管理
    this.getAccount()
    //实名制管理
    this.getEmployeeL()
    this.getEmployeeR()
    //工资代发
    this.getSalaryL()
    this.getSalaryR()
    this.getSalaryEchart()
    //保证金
    this.getBzjInfoT()
    this.getBzjInfoB()
  },
  methods: {
    //不同屏幕省略号显示问题
    func(cname, clientWidth) {
      var cname = document.getElementsByClassName(cname)
      for (var i = 0; i < cname.length; i++) {
        var nowLength = cname[i].innerHTML.length
        if (clientWidth <= 1570 && clientWidth > 1500 && nowLength > 46) {
          cname[i].innerHTML = cname[i].innerHTML.substr(0, 46) + '...'
        }
        if (clientWidth <= 1500 && clientWidth > 1440 && nowLength > 42) {
          cname[i].innerHTML = cname[i].innerHTML.substr(0, 42) + '...'
        }
        if (clientWidth <= 1440 && clientWidth > 1400 && nowLength > 39) {
          cname[i].innerHTML = cname[i].innerHTML.substr(0, 39) + '...'
        }
        if (clientWidth <= 1400 && clientWidth > 1366 && nowLength > 38) {
          cname[i].innerHTML = cname[i].innerHTML.substr(0, 38) + '...'
        }
        if (clientWidth <= 1366 && clientWidth > 1336 && nowLength > 36) {
          cname[i].innerHTML = cname[i].innerHTML.substr(0, 36) + '...'
        }
        if (clientWidth <= 1336 && clientWidth > 1290 && nowLength > 34) {
          cname[i].innerHTML = cname[i].innerHTML.substr(0, 34) + '...'
        }
        if (clientWidth <= 1290 && clientWidth > 1260 && nowLength > 32) {
          cname[i].innerHTML = cname[i].innerHTML.substr(0, 32) + '...'
        }
        if (clientWidth <= 1260 && nowLength > 20) {
          cname[i].innerHTML = cname[i].innerHTML.substr(0, 20) + '...'
        }
      }
    },
    //获取风险项目数据
    getDangerData() {
      this.axios({
        method: 'post',
        // url: "api-ps/projectscoredetail/expand/companyriskpros"
        url: 'api-ps/creditProjScorDetail/expand/findProjectRiskByCompany',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.dangerousDataTotal = res.data.result.length
            this.dangerousProjects = res.data.result
          } else {
            this.$message.error('项目风险数据获取失败')
          }
        })
        .catch((resp) => {})
    },
    //跳转至项目评价详情
    skipProjectDanger(projectId, routerUrl, projectScoreId) {
      if (this.accessControl(routerUrl) == -1) {
        this.goNoAccessPage()
      } else {
        this.$router.push({
          name: 'projectScoreDetail',
          path: '/home/enterpriseScore/projectScoreDetail',
          query: {
            projectId: projectId,
            projectScoreId,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/enterpriseScore/projectScoreList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    //预警跳转
    skipAlert(num, code, routerUrl) {
      if (this.accessControl(routerUrl) == -1) {
        this.goNoAccessPage()
      } else {
        if (num > 0) {
          this.$router.push({
            name: 'constructAlertProjectList',
            path: '/home/project/constructAlertProjectList',
            query: {
              alertType: code,
              status: '01',
            },
          })
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/project/constructAlertProjectList',
            newUrl: this.$router.currentRoute.fullPath,
          })
        } else {
          return
        }
      }
    },
    //跳转项目申报
    projectApply(id, routerUrl) {
      if (this.accessControl(routerUrl) == -1) {
        this.goNoAccessPage()
      } else {
        //有id跳转到详情，没有跳到到列表
        if (id) {
          this.$router.push({
            name: 'projectDeclareDetail',
            path: '/home/project/projectDeclareDetail',
            query: {
              id: id,
              path: 'home',
            },
          })
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/project/projectDeclareList',
            newUrl: this.$router.currentRoute.fullPath,
          })
        } else {
          this.$router.push({
            name: 'projectDeclareList',
            path: '/home/project/projectDeclareList',
            // query: {
            //   projectId:id
            // }
          })
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/project/projectDeclareList',
            newUrl: this.$router.currentRoute.fullPath,
          })
        }
      }
    },
    //跳转政策要点
    skipPolicy(id, title, type, range, routerUrl) {
      if (this.accessControl(routerUrl) == -1) {
        this.goNoAccessPage()
      } else {
        if (id) {
          this.$router.push({
            name: 'inforDetail',
            path: '/home/notice/inforDetail',
            query: {
              status: '02',
              id: id,
              title: title,
              type: type,
              range: range,
              pathUrl: '/home',
            },
          })
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/notice/inforList',
            newUrl: this.$router.currentRoute.fullPath,
          })
        } else {
          this.$router.push({
            name: 'inforList',
            path: '/home/notice/inforList',
          })
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/notice/inforList',
            newUrl: this.$router.currentRoute.fullPath,
          })
        }
      }
    },
    //获取政策要点数据
    getPlicyData() {
      this.axios({
        method: 'post',
        url: 'api-i/info/expand/listbypage',
        data: {
          // pageNo: 1,
          // pageSize: 10,
          status: '02',
          type: '05',
          reveiveUserType: 'COMPANY',
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.policyTotal = res.data.result.totalCount
              this.policyData = res.data.result.results
            } else {
              this.$message.error('政策要点数据获取失败')
            }
          },
          (res) => {
            this.$message.error('政策要点数据获取失败')
          }
        )
        .catch((error) => {})
    },
    //获取代办事项总数
    getTodoTotal() {
      this.axios({
        method: 'post',
        url: 'api-h/homepage/expand/companydetail',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.allAlertTotal = res.data.result.alertNum
              this.projectApplyTotal = res.data.result.proAppFailNum
              // this.employeeApplyTotal = res.data.result.empAppFailNum;
            } else {
              this.$message.error('待办事项总数获取失败')
            }
          },
          (res) => {
            this.$message.error('待办事项总数获取失败')
          }
        )
        .catch((error) => {})
    },
    //获取预警数据
    getAlertData() {
      this.axios({
        method: 'post',
        url: 'api-a/cs/alert/expand/companyalertnum',
        data: {
          pageNo: 1,
          pageSize: 4,
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.alertData[0].num = res.data.result.accountAlertTotal //专户
              this.alertData[1].num = res.data.result.salaryAlertTotal //工资
              this.alertData[2].num = res.data.result.attAlertTotal //考勤
              this.alertData[3].num = res.data.result.childAlertTotal //童工
            } else {
              this.$message.error('待处理预警数据获取失败')
            }
          },
          (res) => {
            this.$message.error('待处理预警数据获取失败')
          }
        )
        .catch((error) => {})
    },
    //获取申报中项目数据
    getProjectApply() {
      this.axios({
        method: 'post',
        url: 'api-p/projectapplication/expand/companyproapp',
        data: {
          pageNo: 1,
          pageSize: 4,
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.projectApplyData = res.data.result.results //专户
          } else {
            this.$message.error('待处理预警数据获取失败')
          }
        })
        .catch((error) => {})
    },
    getCreditL() {
      this.axios({
        method: 'post',
        // url: "api-ps/projectscore/expand/companygrouppros"
        url: 'api-ps/creditProjectScore/expand/findProjectGroupByCompany',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.getCreditEchart(
              response.data.result.list,
              response.data.result.total
            )
          }
        })
        .catch((response) => {})
    },
    creditSeeMore(routerUrl) {
      if (this.accessControl(routerUrl) == -1) {
        this.goNoAccessPage()
      } else {
        this.$router.push({
          path: '/home/enterpriseScore/projectScoreList',
          name: 'projectScoreList',
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/enterpriseScore/projectScoreList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    getCreditR() {
      this.axios({
        method: 'post',
        // url: "api-ps/projectscoredetail/expand/riskprosbypage",
        url: 'api-ps/creditProjectScore/expand/getProjectScoreListByCompany',
        data: {
          pageNo: 1,
          pageSize: 5,
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.creditTotal = response.data.result.totalCount
            this.creditData = response.data.result.results.filter(
              (v) => v.gradeLevel != 'O'
            ) //不显示其他评级
          }
        })
        .catch((response) => {})
    },
    getCreditEchart(data, total) {
      this.$nextTick(() => {
        // var color = ["#58D2D4", "#D06AFF"];
        this.creditChart = this.$echarts.init(
          document.getElementById('projectCreditStatic')
        )
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}个 ({d}%)',
          },
          // color: ["#4EB904", "#1487DF", "#F7B500", "#F34352"],
          series: [
            {
              name: '项目评级',
              type: 'pie',
              radius: ['55%', '70%'],
              center: ['50%', '50%'], //图的位置，距离左跟上的位置
              label: {
                normal: {
                  show: false,
                  position: 'center',
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              data: data,
            },
          ],
          graphic: [
            {
              type: 'text',
              left: 'center',
              top: '40%',
              z: 10,
              zlevel: 10,
              style: {
                text: total,
                fill: '#333',
                textAlign: 'center',
                font: 'small-caps 28px/1 sans-serif',
              },
            },
            {
              type: 'text',
              left: 'center',
              top: '55%',
              z: 10,
              zlevel: 10,
              style: {
                text: '项目总数',
                fill: '#333',
                textAlign: 'center',
                font: 'small-caps 12px/1 sans-serif',
              },
            },
          ],
        }
        this.creditChart.setOption(option)
        window.addEventListener('resize', () => {
          this.creditChart.resize()
        })
      })
    },
    getAccount() {
      this.axios({
        method: 'post',
        url: 'api-acc/account/expand/stats',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            var data = response.data.result
            this.accountInfo = data
            this.accounProjectNum = data.round.project[0].valuel
            this.accounBanlanceNum = data.round.banlance[0].valuel
            this.getAccountL(data.projectScale)
            this.getAccountR(data.banlanceScale)
          }
        })
        .catch((response) => {})
    },
    getAccountL(projectScale) {
      this.$nextTick(() => {
        this.accountChartL = this.$echarts.init(
          document.getElementById('accountProjectStatic')
        )
        var option = {
          series: [
            {
              name: '专户开设',
              type: 'pie',
              radius: ['60%', '80%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              label: {
                //去掉指示线和提示文字
                normal: {
                  position: 'inner',
                  show: false,
                },
              },
              data: [
                {
                  value: 100 - projectScale,
                  itemStyle: {
                    color: '#E9F3FF',
                    opacity: 0.6,
                    emphasis: {
                      color: '#E9F3FF',
                    },
                  },
                },
                {
                  value: projectScale,
                  itemStyle: {
                    normal: {
                      color: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          { offset: 0, color: '#53A8E2' },
                          { offset: 1, color: '#8BD3F3' },
                        ]
                      ),
                    },
                    opacity: 0.9,
                    emphasis: {
                      color: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          { offset: 0, color: '#53A8E2' },
                          { offset: 1, color: '#8BD3F3' },
                        ]
                      ),
                    },
                  },
                },
              ],
            },
          ],
          graphic: [
            {
              type: 'text',
              left: 'center',
              top: '45%',
              z: 10,
              zlevel: 10,
              style: {
                text: projectScale + '%',
                fill: '#53A8E2',
                textAlign: 'center',
                font: 'small-caps 28px/1 sans-serif',
              },
            },
          ],
        }
        this.accountChartL.setOption(option)
        window.addEventListener('resize', () => {
          this.accountChartL.resize()
        })
      })
    },
    getAccountR(banlanceScale) {
      this.$nextTick(() => {
        this.accountChartR = this.$echarts.init(
          document.getElementById('accountMoneyStatic')
        )
        var option = {
          series: [
            {
              name: '专户余额',
              type: 'pie',
              radius: ['60%', '80%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              label: {
                //去掉指示线和提示文字
                normal: {
                  position: 'inner',
                  show: false,
                },
              },
              data: [
                {
                  value: 100 - banlanceScale < 0 ? 0 : 100 - banlanceScale,
                  itemStyle: {
                    color: '#FC8F73',
                    opacity: 0.6,
                    emphasis: {
                      color: '#FC8F73',
                    },
                  },
                },
                {
                  value: banlanceScale,
                  itemStyle: {
                    normal: {
                      color: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          { offset: 0, color: '#F7563F' },
                          { offset: 1, color: '#FC8F73' },
                        ]
                      ),
                    },
                    opacity: 0.9,
                    emphasis: {
                      color: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          { offset: 0, color: '#F7563F' },
                          { offset: 1, color: '#FC8F73' },
                        ]
                      ),
                    },
                  },
                },
              ],
            },
          ],
          graphic: [
            {
              type: 'text',
              left: 'center',
              top: '45%',
              z: 10,
              zlevel: 10,
              style: {
                text: banlanceScale + '%',
                fill: '#F7563F',
                textAlign: 'center',
                font: 'small-caps 28px/1 sans-serif',
              },
            },
          ],
        }
        this.accountChartR.setOption(option)
        window.addEventListener('resize', () => {
          this.accountChartR.resize()
        })
      })
    },
    getEmployeeL() {
      this.axios({
        method: 'post',
        url: 'api-s/cs/employeestats/base/histogram',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            var data = response.data.result
            var months = data.months
            var reactPer = data.reactPer
            this.getEmployeeEchart(months, reactPer)
          }
        })
        .catch((response) => {})
    },
    getEmployeeR() {
      this.axios({
        method: 'post',
        url: 'api-s/cs/employeestats/base/stats',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.employeeInfo = response.data.result
          }
        })
        .catch((response) => {})
    },
    getEmployeeEchart(months, reactPer) {
      this.$nextTick(() => {
        var color = ['#57CCA0', '#BFC5CC']
        this.employeeChart = this.$echarts.init(
          document.getElementById('employStatic')
        )
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
            selectedMode: false, //取消图例上的点击事件
            data: ['已签订人数', '未签订人数'],
            left: 0,
            icon: 'circle',
            itemWidth: 12, // 设置宽度
            itemHeight: 12,
            itemGap: 40,
            textStyle: {
              color: '#485465',
              fontSize: '14',
            },
          },
          color: color,
          grid: {
            left: '0%',
            right: '3%',
            bottom: '0%',
            containLabel: true,
          },
          yAxis: {
            type: 'value',
            name: '  单位：人',
            axisLine: { show: false },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: '#A0A4AA',
                fontSize: '12',
              },
            },
            nameTextStyle: {
              color: '#A0A4AA',
              fontSize: '12',
            },
          },
          xAxis: {
            type: 'category',
            axisLine: { show: false },
            axisTick: {
              show: false,
            },
            axisPointer: {
              type: 'shadow',
            },
            axisLabel: {
              textStyle: {
                color: '#A0A4AA',
                fontSize: '12',
                textAlign: 'left',
              },
            },
            data: months,
          },
          series: [
            {
              name: '已签订人数',
              type: 'bar',
              stack: '人数',
              data: reactPer[0],
            },
            {
              name: '未签订人数',
              type: 'bar',
              stack: '人数',
              data: reactPer[1],
            },
          ],
        }
        this.employeeChart.setOption(option)
        window.addEventListener('resize', () => {
          this.employeeChart.resize()
        })
      })
    },
    getSalaryL() {
      this.axios({
        method: 'post',
        url: 'api-s/cs/salarystats/base/histogram',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            var data = response.data.result
            this.getSalaryEchart(data.months, data.reactPer, data.contractRatio)
          }
        })
        .catch((response) => {})
    },
    getSalaryR() {
      this.axios({
        method: 'post',
        url: 'api-s/cs/salarystats/base/stats',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.salaryInfo = response.data.result
          }
        })
        .catch((response) => {})
    },
    getSalaryEchart(months, reactPer, contractRatio) {
      this.$nextTick(() => {
        var color = ['#58D2D4', '#D06AFF']
        this.salaryChart = this.$echarts.init(
          document.getElementById('salaryStatic')
        )
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
            selectedMode: false, //取消图例上的点击事件
            data: ['发放金额', '发放人次'],
            left: 0,
            // icon: "circle",
            itemWidth: 12, // 设置宽度
            itemHeight: 12,
            itemGap: 40,
            textStyle: {
              color: '#485465',
              fontSize: '14',
            },
          },
          color: color,
          grid: {
            left: '1%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          yAxis: [
            {
              type: 'value',
              name: '金额：万元',
              axisLine: { show: false },
              axisTick: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  color: '#A0A4AA',
                  fontSize: '12',
                },
              },
              nameTextStyle: {
                color: '#A0A4AA',
                fontSize: '12',
              },
            },
            {
              type: 'value',
              name: '代发人次：人次',
              axisLine: { show: false },
              axisTick: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  color: '#A0A4AA',
                  fontSize: '12',
                },
              },
              nameTextStyle: {
                color: '#A0A4AA',
                fontSize: '12',
              },
            },
          ],
          xAxis: {
            type: 'category',
            axisPointer: {
              type: 'shadow',
            },
            axisLine: { show: false },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: '#A0A4AA',
                fontSize: '12',
                textAlign: 'left',
              },
            },
            data: months,
          },
          series: [
            {
              name: '发放金额',
              type: 'bar',
              stack: '金额',
              data: reactPer,
            },
            {
              name: '发放人次',
              type: 'line',
              yAxisIndex: 1,
              data: contractRatio,
            },
          ],
        }
        this.salaryChart.setOption(option)
        window.addEventListener('resize', () => {
          this.salaryChart.resize()
        })
      })
    },
    getBzjInfoT() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/companygrouppros',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.statusDetail = res.data.result.list
              let colorMap = {
                资金存入: '#FFCD95',
                银行保函: '#2C82BE',
                业主保单: '#71DDFD',
                保险保单: '#DEE5F4',
              }
              this.statusDetail.map(
                (val) => (val.colorStyle = colorMap[val.name])
              )
              this.getBzjEchart(res.data.result.list, res.data.result.total)
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.$message.error('项目状态分布数据获取失败')
          }
        )
        .catch((error) => {})
    },
    getBzjEchart(data, total) {
      var color = []
      data.forEach(function (value, i) {
        if (value.total == 0) {
          color = ['#83b0d4']
        } else {
          color = ['#FFCD95', '#2C82BE', '#71DDFD', '#DEE5F4']
        }
      })
      var ProDisData = this.$refs.ProDisData
      if (ProDisData) {
        this.bzjChart = this.$echarts.init(ProDisData)
        this.bzjChart.setOption({
          color: color,
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['70%', '90%'],
              center: ['50%', '50%'], //图的位置，距离左跟上的位置
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center',
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              data: data,
            },
          ],
          graphic: [
            {
              type: 'text',
              left: 'center',
              top: '40%',
              z: 10,
              zlevel: 10,
              style: {
                text: total,
                fill: '#333',
                textAlign: 'center',
                font: 'small-caps 24px/1 sans-serif',
              },
            },
            {
              type: 'text',
              left: 'center',
              top: '55%',
              z: 10,
              zlevel: 10,
              style: {
                text: '项目总数',
                fill: '#666',
                textAlign: 'center',
                font: 'small-caps 14px/1 sans-serif',
              },
            },
          ],
        })
        this.bzjChart.setOption(option)
        window.addEventListener('resize', () => {
          this.bzjChart.resize()
        })
      }
    },
    getBzjInfoB() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/homestats',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.bzjInfo = response.data.result
          }
        })
        .catch((response) => {})
    },
    // 轮播  start
    getBackPayList() {
      return this.axios({
        method: 'post',
        url: 'api-r/rightsdispute/expand/disputeRotation',
        data: {
          projectId: this.projectId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.backPayList = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    beginRotation() {
      this.$nextTick((v) => {
        if (this.$refs.subBox) {
          const width = this.$refs.subBox.offsetWidth
          const time = Math.ceil(width / 80)
          const keyframesLine = `
            @keyframes line{
                0%{
                  transform: translateX(0);
                }
                ${120 / time}%{
                    transform: translateX(0);
                }
                100%{
                  transform: translateX(-100%);
                }
            }
          `
          var style = document.styleSheets[0]
          style.insertRule(keyframesLine, style.length - 1)
          this.$refs.subBox.style.animation = `line ${time}s linear infinite`
        }
      })
    },
    jumpIllegalRecord() {
      this.$router.push({
        path: '/home/illegal/illegalRecord',
        name: 'illegalRecord',
        query: {
          preciseTypeId: '17',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/illegal/illegalRecord',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 轮播  end
  },
}
</script>
<style scoped lang="less">
.redColor {
  color: #e02020;
}
.greenBjColor {
  background: #4eb904;
}
.blueBjColor {
  background: #1487df;
}
.skyBlueBjColor {
  background: #53a8e2;
}
.yellowBjColor {
  background: #f7b500;
}
.redBjColor {
  background: #f34352;
}
.skyRedBjColor {
  background: #fb8469;
}
.title {
  font-size: 22px;
  color: #333333;
  margin-bottom: 10px;
}
.titleSmall {
  font-size: 18px;
  color: #333333;
  margin-top: 25px;
  margin-bottom: 40px;
}
.smallCreditBox {
  width: 8px;
  height: 8px;
  display: inline-block;
  margin: 0 6px 2px 20px;
}
.smallaccountBox {
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 6px;
}
.styBox {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 1px;
}
.seeContent {
  width: 77px;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.noticeTitle {
  margin-right: 72px;
}
.ellipsisTwo {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.container {
  font-size: 14px;
  color: #333;
  background-color: #f5f7fa !important;
  //   position: absolute;
  //   padding: 24px;
  //   top: 106px;
  //   bottom: 0px;
  //   right: -17px;
  //   left: 0px;
  overflow-y: auto;
  overflow-x: hidden;
  // 顶部提示
  .topTip {
    // width: 100%;
    .dangerBox {
      border: 1px solid #e02020;
      height: 34px;
      line-height: 34px;
      position: relative;
      .leftBox {
        // width:100%;
        font-size: 16px;
        position: absolute;
        left: 0;
        width: 75px;
        height: 100%;
        text-align: center;
        background-color: #e02020;
        color: #fff;
      }
      .rightBox {
        margin-left: 75px;
        padding: 0 20px;
        height: 100%;
        color: #666;
        background-color: rgba(224, 32, 32, 0.05);
      }
    }
  }
  //待办事项和政策要点
  .secondLineBox {
    // margin-top: 10px;
    // margin-top: 10px;
    // height: 608px;
    overflow: hidden;
    margin-left: 0px !important;
    margin-right: 0px !important;
    .boxInner {
      // 政策要点
      .leftBoxInner {
        height: 280px;
        padding: 10px 15px;
        background: #fff;
        .titleWord {
          line-height: 40px;
          font-size: 20px;
          color: #333;
        }
        .contentBox {
          padding-top: 20px;
          li {
            cursor: pointer;
            position: relative;
            padding: 12px 14px;
            line-height: 24px;
            &:nth-child(odd) {
              background: #f5f7fb;
            }
            .dot {
              position: absolute;
              width: 6px;
              height: 6px;
              left: 0px;
              top: 7px;
              -wekit-border-radius: 3px;
              -moz-border-radius: 3px;
              -o-border-radius: 3px;
              border-radius: 3px;
            }
            .haveRead {
              background-color: #409eff;
            }
            .noRead {
              background-color: #e02020;
            }
          }
        }
      }
      // 政策要点
      .leftBoxInnerTwo {
        // height: 608px;
        height: 318px;
        padding: 10px 15px;
        background: #fff;
        .titleWord {
          line-height: 40px;
          font-size: 20px;
          color: #333;
        }
        .contentBox {
          padding-top: 20px;
          li {
            cursor: pointer;
            position: relative;
            padding: 12px 14px;
            line-height: 24px;
            &:nth-child(odd) {
              background: #f5f7fb;
            }
            .dot {
              position: absolute;
              width: 6px;
              height: 6px;
              left: 0px;
              top: 7px;
              -wekit-border-radius: 3px;
              -moz-border-radius: 3px;
              -o-border-radius: 3px;
              border-radius: 3px;
            }
            .haveRead {
              background-color: #409eff;
            }
            .noRead {
              background-color: #e02020;
            }
          }
        }
      }
      //待办事项
      .secondLeftBox {
        height: 280px;
        position: relative;
        .waitTodo {
          padding: 10px 32px;
          height: 280px;
          background: #fff;
        }
        .titleWord {
          position: absolute;
          line-height: 40px;
          font-size: 20px;
          color: #333;
        }
        /deep/.el-tabs__header {
          margin-bottom: 0px !important;
          .el-tabs__nav-wrap::after {
            display: none;
          }
          .el-tabs__nav {
            float: right;
            .el-tabs__item {
              //   color: #666;
              //   position: relative;
              //   padding: 0 30px;
              color: #666;
              position: relative;
              width: 110px;
              padding: 0 12px;
              .numIcon {
                position: absolute;
                width: 26px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                background: #e02020;
                color: #fff;
                bottom: 13px;
                right: 0px;
                border-radius: 10px;
              }
            }
            #tab-first {
              padding-left: 0;
              .numIcon {
                right: 9px;
              }
            }
            .el-tabs__item.is-active {
              color: #009588;
            }
            .el-tabs__active-bar {
              background-color: #009588;
            }
          }
        }
        /deep/.el-tabs__content {
          padding-top: 20px;
        }
        //预警
        .alertItemBox {
          margin-bottom: 20px;
          text-align: center;
          color: #333;
          cursor: pointer;
          .alertItemInner {
            height: 82px;
            border: 1px solid #ff9c24;
            background-color: rgba(255, 156, 36, 0.05);
            padding: 10px;
            .alertNum {
              color: #ff9c24;
              font-size: 38px;
              line-height: 40px;
            }
          }
        }
        .tabContent {
          .alignCenter {
            color: #e02020;
          }
          .el-row {
            margin-bottom: 20px;
          }
        }
      }
    }
    .noData {
      text-align: center;
      margin-top: 170px;
    }
    .noDataOther {
      text-align: center;
      margin-top: 70px;
    }
  }
  // 项目评级
  .creditBox,
  .accountBox,
  .rightBoxHalf,
  .salaryBox {
    width: 100%;
    padding: 24px 32px;
    background-color: #ffffff;
  }
  .creditBox {
    height: 318px;
  }
  .creditBox .statistic {
    height: 230px;
    border-right: 2px solid #d5dee7;
  }
  .ThirdLineBox .statistic {
    height: 185px;
  }
  .rightBoxHalf .statistic {
    height: 290px;
  }
  .keyContainer,
  .rightBoxHalf,
  .ThirdLineBox,
  .forthLineBox {
    .keyWrapper {
      margin-top: 12px;
      .keyBox {
        height: 92px;
        float: left;
        width: 31.33333333%;
        background: #f5f7fb;
        margin-top: 8px;
        border-radius: 4px;
        text-align: center;
        padding-top: 20px;
        .keyName {
          font-size: 14px;
          color: #666;
          line-height: 21px;
        }
        .quantity {
          color: #009588;
          font-weight: bold;
          font-size: 28px;
          line-height: 36px;
        }
      }
      .keyBox:nth-child(3n-1) {
        margin-left: 3%;
        margin-right: 3%;
      }
    }
    .listBox {
      padding-left: 20px;
      ul li {
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        &:nth-child(odd) {
          background: #f5f7fb;
        }
        &:nth-child(even) {
          border-bottom: 1px solid #f7f9ff;
        }
        .projectName,
        .gradeLevel {
          display: inline-block;
          text-align: left;
        }
        .projectName {
          width: 74%;
          padding-left: 20px;
        }
        .gradeLevel {
          width: 22%;
          display: inline-block;
          text-align: right;
          padding-right: 20px;
        }
      }
      .tag {
        color: #32c5ff;
      }
    }
    .noData {
      text-align: center;
      margin-top: 70px;
    }
  }
  .ThirdLineBox,
  .forthLineBox {
    margin-top: 10px;
    .leftBoxHalf {
      height: 590px;
      padding: 24px 24px;
      background: #fff;
    }
    .rightBoxHalf {
      padding-left: 24px !important;
      padding-right: 24px !important;
      padding-top: 24px;
      padding-bottom: 24px;
      background: #fff;
    }
  }
  .bzjBox {
    height: 290px;
    ul {
      padding-top: 90px;
      li {
        line-height: 30px;
        span {
          margin-right: 12px;
        }
      }
    }
    .bzjR {
      padding-top: 40px;
    }
  }
  .ProDisData {
    height: 200px;
    width: 200px;
  }
  @media screen and (min-width: 1024px) and (max-width: 1440px) {
    .alertName {
      font-size: 12px !important;
    }
  }
  @media screen and (max-width: 1440px) {
    .bzjBox ul li {
      line-height: 26px;
    }
  }
}
.backPay {
  width: 100%;
  height: 42px;
  // margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 20px;
  padding-right: 120px;
  line-height: 42px;
  background-color: #fff;
  position: relative;
  .lookMore {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
  .warn {
    color: #f56c6c;
  }
  .infoBox {
    width: 100%;
    height: 42px;
    overflow: hidden;
    .subBox {
      width: auto;
      white-space: nowrap;
      display: inline-block;
      zoom: 1;
      .info {
        padding-right: 40px;
        display: inline-block;
        .desc {
          color: #666;
        }
      }
    }
  }
}
</style>
